<template>
  <div>
    <el-tag class="box1" :class="{box2: isNum === 100}" @click="routerpush"><span>工作台</span></el-tag>
    <template>
      <el-tag
        v-for="(item, index) in queryList"
        ref="isRef"
        :key="index"
        class="box1"
        :class="{box2: isNum === index|| isNum === item.path || isNum === queryList.length - 2}"
        closable
        @click="pathList(index,item)"
        @close="isClose(index)"
      >{{
        item.name
      }}</el-tag>
      <el-dropdown>
        <div class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="dele1">关闭左侧</el-dropdown-item>
          <el-dropdown-item>关闭右侧</el-dropdown-item>
          <el-dropdown-item>关闭其他</el-dropdown-item>
          <el-dropdown-item>关闭全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </div>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: null,
      queryList: [],
      isNum: -1
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      const arr = []
      const matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      )
      try {
        arr.push({
          name: matched[1].meta.title,
          path: matched[1].path
        })
        this.queryList.push({
          name: matched[1].meta.title,
          path: matched[1].path
        })
        const map = new Map()
        for (const item of this.queryList) {
          if (!map.has(item.name)) {
            map.set(item.name, item)
          }
        }
        this.queryList = [...map.values()]
        console.log(arr[0].path)
        this.isNum = arr[0].path
        this.queryList.forEach(item => {
          if (arr[0].path === item.path) {
            this.isNum = arr[0].path
          }
        })
      } catch (err) {
        return
      }
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return (
        name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
      )
    },
    pathCompile(path) {
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    },
    routerpush() {
      this.isNum = 100
      this.$router.push('/')
    },
    pathList(index, item) {
      this.$router.push(item.path)
      this.isNum = index
    },
    isClose(index) {
      this.isNum = this.queryList.length - 2
      this.queryList.splice(index, 1)
      this.$router.push({ path: this.queryList[this.queryList.length - 1].path })
      if (index === 0) {
        this.isNum = 100
      }
      this.$refs.isRef.forEach(item => {
        console.log(item.$router)
      })
    },
    dele1() {
      this.queryList.splice()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  background-color: #fff;
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  // height:160px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
.box1 {
  margin-top: 15px;
  background-color: #fff;
  color: #b3abab;
  border-radius: 4px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  margin-left: 30px;
  text-align: center;
}
.box2{
  color: #ffb200;
}
.el-dropdown-link{
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background-color: #fff;

  border-radius: 6px;
}
.el-dropdown{
  position: fixed;
  right: 35px;
  top: 15px;
}
</style>
